<template>
  <el-popover
    v-model:visible="visible"
    show-arrow
    placement="bottom"
    title="设置表格显示"
    :width="popWidth"
    trigger="click"
    @show="tableCelShow"
  >
    <template #reference>
      <el-button
        type="text"
        size="mini"
        style="color: #666"
      >
        <span>列</span>
        <i
          class="iconfont icon-xiajiantou"
          style="margin-left:3px;font-size: 8px;"
        />
      </el-button>
    </template>
    <div
      class="list-container"
      style="max-width:100%;max-height: 400px;overflow-y:auto;box-sizing:border-box;"
    >
      <el-alert
        v-if="checkList.length < minNum"
        :title="`表格列不能少于${minNum}个`"
        type="error"
        center
        :closable="false"
      />
      <el-checkbox-group v-model="checkList">
        <el-checkbox
          v-for="(item, index) in options"
          :key="index"
          :label="item.key"
          style="width:100%;margin-right:0px;"
        >{{ item.value }}</el-checkbox>
      </el-checkbox-group>
    </div>
    <div
      class="btn"
      style="display:flex;justify-content: center;align-items:center;margin-top:20px;"
    >
      <el-button
        size="mini"
        class="border-btn"
        @click="cancelOperation"
      >取消</el-button>
      <el-button
        type="primary"
        size="mini"
        class="main-btn"
        @click="confrimOperation"
      >确定</el-button>
    </div>
  </el-popover>
</template>

<script>
import {defineComponent, getCurrentInstance, ref} from 'vue'

export default defineComponent({
  props: {
    popoverWidth: {
      type: Number,
      default: 200,
    },
    minNumber: {
      type: Number,
      default: 4,
    },
    tableOption: {
      type: Array,
      default: () => {
        return []
      },
    },
    checked: {
      type: Array,
      default: () => {
        return []
      },
    },
  },
  emits: ['checkList'],
  setup(props, context) {
    var currentInstance = getCurrentInstance()
    var visible = ref(false)
    var checkList = ref(props.checked)
    var options = props.tableOption || []
    var popWidth = props.popoverWidth || 150
    var minNum = props.minNumber || 5
    const tableCelShow = () => {
      context.emit('show', true)
    }
    const cancelOperation = () => {
      visible.value = false
    }
    const close = () => {
      visible.value = false
    }
    const confrimOperation = () => {
      console.log(checkList.value)
      if (checkList.value.length >= minNum) {
        currentInstance.emit('checkList', checkList.value)
        visible.value = false
      }
    }
    return {
      visible,
      checkList,
      options,
      popWidth,
      minNum,
      cancelOperation,
      confrimOperation,
      tableCelShow,
      close,
    }
  },
})
</script>

